<template>
	<view class="yg-cart">
		<!-- 购物车没有商品 -->
		<view v-if="carts.length==0">
			<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3298947587,976044362&fm=15&gp=0.jpg">
			</image>
			<navigator url="/pages/category/category" open-type="switchTab" style="text-align: center;">去逛逛</navigator>
		</view>
		<!-- 购物车有商品 -->
		<view v-else class="yg-cart-content">
			<view class="cart-content-list">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options"  @click="onClick($event,index)"
						  v-for="(item,index) in carts" :key="item.goods_id">
						<view class="cart-content-item">
							<view class="content-item-left">
								<view @click="changeChecked(index)"
									:class="['iconfont',item.checked?'icon-xuanzhong':'icon-icon-test1']"></view>
							</view>
							<view class="content-item-mid">
								<image :src="item.goods_big_logo"></image>
							</view>
							<view class="content-item-right">
								<view class="item-right-title">
									{{item.goods_name}}
								</view>
								<view class="item-right-bottom">
									<view class="right-bottom-price">
										￥{{item.goods_price}}
									</view>
									<view class="right-bottom-num">
										<view @click="numSub(index)" class="iconfont icon-iconset0187">
										</view>
										<view class="num">
											{{item.num}}
										</view>
										<view @click="numAdd(index)" class="iconfont icon-54">

										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="cart-content-bottom">
				<view class="content-bottom-left">
					<view :class="['iconfont',allChecked?'icon-xuanzhong':'icon-icon-test1']" @click="changeAllChecked">
					</view>
					<view class="text">
						全选
					</view>
					<view class="text1">
						合计:
					</view>
					<view class="price">
						￥{{totalPrice}}
					</view>
				</view>
				<view class="content-bottom-right">
					<navigator v-if="totalNum!==0" class="bottom-right-btn" url="/pages/pay/pay">
						去结算({{totalNum}})
					</navigator>
					<view v-else class="bottom-right-disabled" >
						去结算({{totalNum}})
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			// 获取购物车数据
			let carts = uni.getStorageSync('carts') || []
			this.carts = carts
		},
		data() {
			return {
				carts: [],
				options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: '#dd524d'
				            }
				        }
				      ]
			};
		},
		watch: {
			// 深度侦听carts数组，每次发生改变就存储一次
			carts: {
				deep: true,
				handler(newValue, oldValue) {
					uni.setStorageSync('carts', this.carts)
				}
			}
		},
		computed:{
			// 计算属性监听全选按钮的状态
			allChecked(){
				return this.carts.every(item=>item.checked)
			},
			totalNum(){
				return this.carts.reduce((sum,item)=>{
					if(item.checked){
						sum+=item.num
					}
					return sum
				},0)
			},
			totalPrice(){
				return this.carts.reduce((sum,item)=>{
					if(item.checked){
						sum+=item.num*item.goods_price
					}
					return sum
				},0)
			}
		},
		methods: {
			// 全选按钮点击事件
			changeAllChecked(){
				let allChecked=!this.allChecked
				this.carts.forEach(item=>item.checked=allChecked)
			},
			// 滑动显示删除点击事件
			 onClick(e,index){
			      uni.showModal({
			      	title: '您确定删除吗？',
			      	success: (res) => {
			      		if (res.confirm) {
			      			this.carts.splice(index, 1)
			      		} else {
			      			console.log('用户点击取消')
			      		}
			      	}
			      })
			    },
			// 修改选中状态
			changeChecked(index) {
				let goodInfo = this.carts[index]
				goodInfo.checked = !goodInfo.checked
				this.carts[index] = goodInfo
			},
			// 减少点击按钮
			numSub(index) {
				let goodInfo = this.carts[index]
				if (goodInfo.num - 1 <= 0) {
					uni.showModal({
						title: '您确定删除吗？',
						success: (res) => {
							if (res.confirm) {
								this.carts.splice(index, 1)
							} else {
								console.log('用户点击取消')
							}
						}
					})
				} else {
					goodInfo.num -= 1,
						this.carts[index] = goodInfo
				}
			},
			// 添加点击按钮
			numAdd(index) {
				let goodInfo = this.carts[index]
				if (goodInfo.num + 1 > goodInfo.goods_number) {
					uni.showToast({
						title: "已经超过库存了！",
						icon: "none"
					})
				} else {
					goodInfo.num += 1,
						this.carts[index] = goodInfo
				}
			}
		}
	}
</script>

<style lang="scss">
	.yg-cart-content {
		.cart-content-list {
			height: calc(100vh - 80rpx);
			overflow-y: scroll;

			.cart-content-item {
				display: flex;

				.content-item-left {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon-xuanzhong {
						color: #eb4450;
					}

					.icon-icon-test1 {
						color: #ccc;
					}
				}

				.content-item-mid {
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 190rpx;
						height: 190rpx;
					}
				}

				.content-item-right {
					flex: 4;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 190rpx;
					padding: 20rpx;

					.item-right-title {
						font-size: 24rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.item-right-bottom {
						display: flex;
						justify-content: space-between;
						align-content: center;

						.right-bottom-price {
							color: #eb4450;
						}

						.right-bottom-num {
							display: flex;
							align-items: center;

							.iconfont.icon-iconset0187 {
								margin-right: 20rpx;
							}

							.num {
								margin-right: 20rpx;
								color: #9f9f9f;
							}

							.iconfont.icon-54 {}
						}
					}
				}
			}
		}

		.cart-content-bottom {
			height: 80rpx;
			border-top: 2px solid #ddd;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;

			.content-bottom-left {
				display: flex;

				.icon-xuanzhong {
					color: #eb4450;
					margin-right: 20rpx;
				}
				.icon-icon-test1{
					color: #ccc;
					margin-right: 20rpx;
				}

				.text {
					margin-right: 20rpx;
					color: #c7c7c7;
					font-size: 20rpx;
				}
				.text1 {
					margin-right: 20rpx;
					font-size: 26rpx;
					color: #292929;
				}

				.price {
					color: #eb4450;
					font-size: 28rpx;
				}
			}

			.content-bottom-right {
				.bottom-right-btn {
					border-radius: 26rpx;
					font-size: 20rpx;
					height: 50rpx;
					width: 150rpx;
					background-color: #e03440;
					color: white;
					text-align: center;
					line-height: 50rpx;
				}
				.bottom-right-disabled{
					border-radius: 26rpx;
					font-size: 20rpx;
					height: 50rpx;
					width: 150rpx;
					background-color: #ccc;
					color: white;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}
	}
</style>
